<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link crossorigin="anonymous" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h2 class="page-header">Promise封装AJAX操作</h2>
        <button class="btn btn-primary" id="btn">点击发送AJAX</button>
    </div>
    <script>
        //接口地址 https://api.apiopen.top/api/sentences
        //获取元素对象
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            //创建promise
            const p = new Promise((resolve,reject) => {
                //1.创建对象
                const xhr = new XMLHttpRequest();
                //2.初始化
                xhr.open('GET','https://api.apiopen.top/api/sentences');
                //3.发送
                xhr.send();
                //4.处理响应结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断响应状态码 2xx
                        if(xhr.status >= 200 && xhr.status < 300){
                            //控制台输出响应体
                            // console.log(xhr.response); 
                            resolve(xhr.response);
                        }else{
                            //控制台输出响应状态码
                            // console.log(xhr.status);
                            reject(xhr.status);
                        }
                    }
                }
            });
            //调用then方法
            p.then(value => {
                console.log(value);
            },reason => {
                console.warn(reason);
            })
        });
    </script>
</body>
</html>
<script>
    // function loadImg(src){
    //     //创建promise对象
    //     let promise=new Promise(function(resolve,reject){
    //         //创建img标签
    //         var img = document.createElement('img');
    //         //加载成功
    //         img.onload=function(){
    //             console.log('图片的资源',src);
    //             //当图加载成功的时候就执行rejct区间
    //             resolve(img)
    //         }
    //         img.onerror=function(){
    //             //当图片加载失败时，就执行reject区间
    //             reject()
    //         }
    //         img.src=src
    //     });
    //     //把promise对象进行返回
    //     return promise;
    // }
    // // let src='https://imgcps.jd.com/ling4/100038004391/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa2e/c754c1df/cr/s/q.jpg'
    // // let result=loadImg(src)
    // // result.then(function(img){
    // //     console.log('图片的宽度:',img.width);
    // // },function(){
    // //     console.log('加载失败..');
    // // })
    // let src ='https://imgcps.jd.com/ling4/100038004391/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa2e/c754c1df/cr/s/q.jpg'
    // let result=loadImg(src)

    // result.then(function(img){
    //     console.log('第一个资源',img.width);

    // let src2='https://img20.360buyimg.com/seckillcms/s140x140_jfs/t1/164619/33/34399/110788/64058802F9963a2fe/df072ff778b706c9.jpg.webp'

    // let result2=loadImg(src2)
    // return result2;
    // },function(){
    //     console.log('请求失败');
    // }).then(function(img2){
    //     console.log('获取第二个资源：',img2.width);
    // })
</script>